<template>
	<view class="helpCenter">
		<view class="help_header"><u-section title="常见问题" :right="false" line-color="#169BD5"></u-section></view>

		<u-collapse :item-style="itemStyle" :head-style="headStyle" hover-class="none">
			<u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">
				<view class="collapse-item">{{ item.body }}</view>
			</u-collapse-item>
		</u-collapse>

		<view class="positon_bottom">
			<u-button type="primary" shape="circle" style="width: 600rpx;" @click="playMobile">
				<u-icon name="phone" color="#ffffff" size="32"></u-icon>
				<text style="margin-left: 20rpx;">联系客服</text>
			</u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			itemStyle:{
				borderBottom:'1px solid #f2f2f2'
			},
			headStyle: {
				fontSize: '28rpx'
			},
			itemList: [
				{
					head: '屏幕出现黑屏如何处理？',
					body: '1、检查电源线是否连接正常；2、检查屏幕是否有人为损坏；如以上情况均为出现，建议走报修流程。',
					open: true,
					disabled: true
				},
				{
					head: '屏幕出现闪屏如何处理？',
					body: '1、检查电源线是否连接正常；2、检查屏幕是否有人为损坏；如以上情况均为出现，建议走报修流程或者建议换个屏幕',
					open: false
				},
				{
					head: '屏幕开机无响应如何处理？',
					body: '1、检查电源线是否连接正常；2、检查屏幕是否有人为损坏；如以上情况均为出现，建议走报修流程或者建议换个屏幕',
					open: false
				}
			]
		};
	},
	methods: {
		playMobile() {
			uni.makePhoneCall({
				phoneNumber: '15808767554'
			});
		}
	}
};
</script>
<style scoped lang="scss">
.helpCenter {
	padding: 20rpx;
	font-size: 28rpx;
	.help_header {
		padding: 30rpx 0;
		border-bottom: 1px solid #f2f2f2;
	}
}
.collapse-item {
	padding: 20rpx;
	font-size: 26rpx;
	letter-spacing: 3rpx;
}

.positon_bottom {
	position: fixed;
	bottom: env(safe-area-inset-bottom);
	left: 0;
	right: 0;
	height: 140rpx;
	@include flex(row, center, center);
}
</style>
